<template>
	<div>
		<el-cascader
			v-model="selectedOptions"
			:options="options"
			size="large"
			style="width: 400px;"
			@change="handleChange">
		</el-cascader>
	</div>
</template>

<script>
import axios from 'axios'

const hashMap = {}
export default {
	name: "areas",
	data() {
		return {
			options: [],
			selectedOptions: [],
			regionValue: []
		}
	},
	methods: {
		handleTree(data) {
			const tree = []
			data.forEach((item) => {
				item.value = item.code
				item.label = item.name
				hashMap[item.code] = item
			})
			data.forEach((item) => {
				const parent = hashMap[item.parentId]
				if (parent) {
					parent.children = parent.children || []
					parent.children.push(item)
				} else {
					tree.push(item)
				}
			})
			return tree
		},
		handleChange() {
			console.log(this.regionValue)
		}
	},
	created() {
		axios
			.get("http://localhost:8080/sysArea")
			.then(({data}) => {
				this.options = this.handleTree(data.data)
			})
	},
	watch: {
		selectedOptions: {
			deep: true,
			handler() {
				this.selectedOptions.forEach((item)=>{
					this.regionValue.push({code:item,name:hashMap[item].name})
				})
			}
		}
	}
}
</script>

<style scoped>

</style>
